<script lang='ts' setup name='index'>  
 import { shallowReactive, shallowRef  } from 'vue' 

const user = shallowRef({
    name:'jshand',
    age:18,
    address:{
        province:'黑龙江'
    }
})


const person = shallowReactive({
    name:'jshand',
    age:18,
    address:{
        province:'黑龙江'
    }
})



console.log(
  '%c user: ',
  'background-color: #3756d4; padding: 4px 8px; border-radius: 2px; font-size: 14px; color: #fff; font-weight: 700;',
  user 
)


//方法

function changeName(){
    user.value.name += '~'
}
function  changeAge(){
    user.value.age += 2
}
function  changeProvince(){
    user.value.address.province += '#'
}

function changeUser(){
    user.value = {
    name:'邓肯',
    age:30,
    address:{
        province:'肯尼迪'
    }
}
}




function shallowChangeName(){
    person.name  +='~'
}
function shallowChangeAge(){
    person.age  += 2
}
function shallowChangeProvince(){
    person.address.province += '#'
}



</script>  
  
<template>  

    <div style="background-color: skyblue;border: solid 1px grey;padding: 10px;border-radius: 10px ;box-shadow: 0 0 50px grey;">
        <h3>
            name:{{ user.name }}
        </h3>
        <h3>
            age:{{ user.age }}
        </h3>
        <h3>
            province:{{ user.address.province }}
        </h3>


        <div><button  @click="changeName()">修改 name  </button></div>
        <div><button  @click="changeAge()">修改 age  </button></div>
        <div><button  @click="changeProvince()">修改 province  </button></div>
        <div><button  @click="changeUser()">修改User </button></div>
    </div>

    <div style="background-color: skyblue;border: solid 1px grey;padding: 10px;border-radius: 10px ;box-shadow: 0 0 50px grey;">
        <h2> 使用ShallowReactive 定义的数据</h2>
      
        <h3>
            name:{{ person.name }}
        </h3>
        <h3>
            age:{{ person.age }}
        </h3>
        <h3>
            province:{{ person.address.province }}
        </h3>


        <div><button  @click="shallowChangeName()">修改 name  </button></div>
        <div><button  @click="shallowChangeAge()">修改 age  </button></div>
        <div><button  @click="shallowChangeProvince()">修改 province  </button></div>
        <!-- <div><button  @click="shallowChangePerson()">修改Person </button></div> -->
    </div>



  
</template>  
  
<style scoped>  

</style>  